<template>
  <footer class="footer">
    <router-link v-for="(v, i) in list" :key="i" @click.native="switchFoot(v)" tag="figure" :to="v.path">
      <p :class="v.pq"></p>
      <figcaption>{{v.ming}}</figcaption>
    </router-link>
  </footer>
  
</template>
<script>
 export default {
  data () {
    return {
      list: [
        {
          pq: 'iconfont icon-shouye',
          ming:'首页',
          path: '/Index'
        },
        {
          pq: 'iconfont icon-leimupinleifenleileibie--1',
          ming:'分类',
          path: '/list'
        },
        {
          pq: 'iconfont icon-youxuan',
          ming:'优先',
          path: '/xuan'
        },
        {
          pq: 'iconfont icon-gouwuche1',
          ming:'购物车',
          path: '/gou'
        },
        {
          pq: 'iconfont icon-home',
          ming:'我的',
          path: '/wode'
        }
      ]
    }
  },
  methods: {
    switchFoot (v) {
      this.$emit('navTitle', v.ming)
    }
  },
  created () {
    this.$emit('navTitle', this.list[0].ming)
  }
} 
</script>
<style scoped lang="less">
  .px2rem(@name, @px) {
      @{name}: @px / 75 * 1rem;
  }
  .footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
   .px2rem(height,100);
    display: flex;
    background: white;
    box-shadow: 0 -4px 4px #ccc;
    z-index: 120;
    figure{
      flex: 1;
      display: flex;
      flex-direction: column;
      p{
        .px2rem(font-size,48);
        margin: auto;
        
      }
      figcaption{
        .px2rem(font-size,30);
        text-align: center;
        color: #666;
      }
      &.router-link-exact-active{
        color: #FF0099;
         figcaption{
            color: #ff0027;
         }
      }
    }
  }
</style>


